<template>
  <div>
    <a-table
      :data-source="activeAlarm"
      :rowKey="(record, index) => index"
      size="small"
      :columns="columns"
      :pagination="false"
    ></a-table>
  </div>
</template>

<script>
export default {
  name: "ActiveAlarm",
  data() {
    return {
      loading: false,
      show: false,
      columns: [
        {
          title: "设备",
          dataIndex: "thing_name",
        },
        {
          title: "站点",
          dataIndex: "station_name",
        },
        {
          title: "告警",
          dataIndex: "alarm_name",
        },

        {
          title: "索引",
          dataIndex: "mindex",
        },
        {
          title: "级别",
          dataIndex: "level",
        },
        {
          title: "时间",
          dataIndex: "alarm_time",
        },
        {
          title: "告警原因",
          dataIndex: "params['reason']",
        },
        {
          title: "相关量",
          dataIndex: "properties",
        },
      ],
    };
  },
  computed: {
    activeAlarm() {
      return this.$store.state.activeAlarm.activeAlarms;
    },
    alarmCount() {
      const alarms = this.$store.state.activeAlarm.activeAlarms;
      if (alarms) {
        return alarms.length;
      }
      return 0;
    },
  },
  beforeCreate() {
    // you should check in this action that items already loaded earlier as well
  },
  mounted() {
    console.log("hello------------------------------222");
    this.refresh();
  },
  methods: {
    refresh() {
      this.$store.dispatch("activeAlarm/refreshActiveAlarm");
    },
  },
};
</script>

<style lang="less">
.header-notice {
  display: inline-block;
  transition: all 0.3s;
  span {
    vertical-align: initial;
  }
  .notice-badge {
    color: inherit;
    .header-notice-icon {
      font-size: 16px;
      padding: 4px;
    }
  }
}
.dropdown-tabs {
  background-color: @base-bg-color;
  box-shadow: 0 2px 8px @shadow-color;
  border-radius: 4px;
  .tab-pane {
    padding: 0 24px 12px;
    min-height: 250px;
  }
}
</style>